<template>
  <div class="container">
    <van-nav-bar title="维修确认" fixed class="titleStyle" left-arrow @click-left="onClickLeft" />
    <van-button class="saveBtn" type="primary" native-type="submit" @click="handleSubmit()">提交</van-button>
    <div class="publicBox formDivBox">
      <van-form ref="form">
        <van-field label="申请单号" :value="dataInfo.applyNo" readonly size="mini" />
        <van-field label="故障分类" :value="dataInfo.faultClassifyName" readonly size="mini" />
        <van-field label="设备编码" :value="dataInfo.equipCode" readonly size="mini" />
        <van-field label="设备名称" :value="dataInfo.equipName" readonly size="mini" />
        <van-field label="故障发生时间" :value="dataInfo.faultTime" readonly size="mini" />
        <van-field label="申请人" :value="dataInfo.applyName" readonly size="mini" />
        <van-field label="紧急度" :value="dataInfo.emergency" readonly size="mini" />
        <van-field label="所属部门" :value="dataInfo.factoryName" readonly size="mini" />
        <van-field label="故障描述" :value="dataInfo.faultRemark" readonly size="mini" />
        <van-field name="repairMethod" label="维修方式" :rules="[{ required: true, message: '请选择维修方式', trigger: 'blur' }]">
          <template #input>
            <van-radio-group v-model="ruleForm.repairMethod" direction="horizontal">
              <van-radio :name="1">内修</van-radio>
              <van-radio :name="2">外修</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field v-model="ruleForm.repairOutReason" label="外修理由" :rules="[{ required: ruleForm.repairMethod === 1 ? false : true, message: '请输入外修理由', trigger: 'blur' }]" :disabled="ruleForm.repairMethod === 1 ? true : false" rows="3" size="mini" type="textarea" maxlength="200" show-word-limit />
        <p class="pStyle">自定义字段</p>
        <div class="extensionDiv">
          <van-field v-for="(item, index)  in extension" disabled :key="index" v-model="item.value" :name="item.value" :label="item.fieldName" />
        </div>
      </van-form>
    </div>
  </div>
</template>
<script>
export default {
  name: 'RepairRequest',
  data() {
    return {
      currentDate: new Date(),
      ruleForm: {
        repairMethod: 1,
        repairOutReason: '',
        id: ''
      },
      show: false,
      code: localStorage.getItem('code'),
      list: [],
      loading: false,
      isLoading: false,
      detailsObj: {},
      extension: [],
      dataInfo: {},
      tableName: 't_equip_repair_order' // 自定义字段所属表名
    }
  },
  watch: {},
  created() {},
  mounted() {
    this.getData()
  },
  methods: {
    async getData() {
      this.detailsObj = this.$store.state.data
      setTimeout(async () => {
        const res = await this.$axios.get(
          `/dobo-platform/general/field/extension/${this.tableName}`
        )
        if (res && res.data.code === 200) {
          this.extension = res.data.data
          if (this.extension.length > 0) {
            this.extension.forEach((el) => {
              for (const key in this.detailsObj) {
                if (Object.hasOwnProperty.call(this.detailsObj, key)) {
                  const item = this.detailsObj[key]
                  if (el.fieldColumn === key) {
                    el.value = item
                  }
                }
              }
            })
          }
        }
        const res1 = await this.$axios.get(
          `/dobo-equip/repair/order/detail?id=${this.detailsObj.id}`
        )
        if (res && res1.data.code === 200) {
          this.dataInfo = res1.data.data
          console.log(this.dataInfo)
          this.ruleForm.id = this.detailsObj.id
        }
      })
    },
    handleSubmit() {
      this.$refs.form
        .validate()
        .then(() => {
          this.$dialog
            .confirm({
              title: '提示',
              message: '是否确认提交？'
            })
            .then(() => {
              this.submitApi()
            })
            .catch(() => {
              return false
            })
        })
        .catch(() => {})
    },
    submitApi() {
      console.log(this.ruleForm)
      const toast = this.$toast.loading({
        duration: 0, // 持续展示 toast
        message: '提交中...',
        forbidClick: true,
        loadingType: 'spinner'
      })
      this.$axios
        .post('/dobo-equip/repair/order/confirm', this.ruleForm)
        .then((res) => {
          if (res.data.code === 200) {
            toast.clear()
            this.$dialog
              .alert({
                title: '提示',
                message: '提交成功!'
              })
              .then(() => {
                this.$router.push('/eqRepairRequest')
              })
              .catch(() => {})
          } else {
            this.$toast.fail(res.data.msg)
            setTimeout(() => {
              toast.clear()
              this.$router.push('/eqRepairRequest')
            }, 1000)
          }
        })
        .catch(() => {})
    },
    // 返回
    onClickLeft() {
      const { query } = this.$route
      if (query.path) {
        this.$router.push(`/${query.path}`)
      } else {
        this.$router.push('/eqRepairRequest')
      }
    }
  }
}
</script>
<style lang='scss' scoped>
.container {
  .saveBtnDiv {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 200px;
    height: 40px;
    text-align: right;
  }
  .inputRightFont {
    overflow: hidden;
    height: 40px;
    line-height: 40px;
    .sp {
      padding-left: 5px;
    }
  }
  .formDivBox {
    .van-field {
      border: 1px solid #f5f5f5;
    }
    .pStyle {
      height: 35px;
      line-height: 35px;
      background: #f5f5f5;
      text-align: center;
    }
    .extensionDiv {
      overflow: hidden;
      .van-field {
        width: 50%;
        float: left;
        border: 1px solid #f5f5f5;
      }
    }
  }
}
</style>
<style lang='scss'>
// 提交按钮样式
.saveBtnDiv {
  .saveBtns {
    float: right;
    font-size: 16px;
    z-index: 102;
    height: 40px;
    line-height: 40px;
    background: linear-gradient(to top right, #1cacff, #022566);
    border: 1px solid #022566;
    padding: 0 12px;
    .van-button__content {
      display: block;

      .van-button__text {
        text-align: center;
        width: 100%;
        font-size: 20px;
      }
    }
  }
}
</style>
